<template>
    <div>
      <ul>
        <span v-for="item in arr" :key="item">
          <input type="checkbox" v-model="hobby" v-bind:value='item' >{{item}}
        </span>
        <li v-for="str in hobby" :key="str">
          {{str}}
        </li>
      </ul>
    </div>

     
    
</template>

<script>
export default {
   data(){
    return {
      arr:["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      hobby:[]
    }
   }
}
</script>

<style>

</style>